
$(()=>{

    //自定义分页组件
    Vue.component('mypager',{
        template:'#pager',
        data:function(){
            return{
                total_page:this.total_page,
                curr_page:1
            }
        },
        methods:{
            fetch:function(index){
                this.curr_page = index;
                this.$emit('e-page', this.curr_page);//丢值到Vue实例方法上
            }
        },
        props:['total_page']
    });


    new Vue({
        el:'#mycart',
        data:{
            name:'hanley',
            myitem:'',
            uncount:0,
            page_size :5,
            curr_page :1,
            page_tmp:0,//用于分页组件循环，有点low,暂没想到好的办法，待优化
            total_page:0,
            carts:[]
        },
        mounted:function(){
            this.page();
            this.changeList();//仅当前页面内容，并非全部
        },
        methods:{
            add:function(itemName){
                if(itemName == '') return;
                let o = {itemName:itemName,qty:1,payflg:false}
                let _this = this;
                
                axios.post('/list/add', {
                    item: o
                  }).then(function (response) {
                    _this.carts.unshift({itemName:itemName,qty:1,payflg:false});
                    _this.changeList();
                    _this.myitem = '';
                    _this.page();
                  }).catch(function (error) {
                    console.log(error);
                  });
               
            },
            del:function(index){
                let item = this.carts.slice(index,index+1)[0];
                let itemName = item.itemName;
                let _this = this;
                axios.post('/list/delete', {
                    itemName: itemName
                  }).then(function (response) {
                    _this.carts.splice(index,1);
                    _this.changeList();
                  }).catch(function (error) {
                    console.log(error);
                  });
            },
            changeList: function(){
                this.uncount = this.carts.filter( item => !item.payflg).length;
            },
            page:function(){
                let _this = this;
                axios.post('/list/page', {
                    num: _this.curr_page,
                    psize:_this.page_size
                  }).then(function (response) {
                    
                    let data = response.data.current_page_content;
                    let pages = response.data.total_page;
                    if(data != undefined && data != '' && data != null){
                        _this.carts =  data;
                        _this.total_page = parseInt(pages);
                    }
                    console.log('total_page='+_this.total_page);
                   
                  }).catch(function (error) {
                    console.log(error);
                  });
            },

            //接收子组件的页码值，并发起数据请求
            fetch:function(curr_page){
                this.curr_page = curr_page;
                this.page();
            }
            
        },
        filters:{
            payFilter:function(val){
                switch(val){
                    case true:
                        return '已采购';
                    case false:
                        return '未采购';
                    default:
                        return '未知';
                }
            }
        },
    });
});